<template>
    <view class="goods mt-20 b-24 ph-24 pb-32 pt-12">
        <view class="f jc-c">
            <view class="w-300">
                <u-tabs
                    :list="typeList"
                    @click="changeType"
                    lineColor="#FABB3D"
                    :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                    :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                    :itemStyle="{ width: '50%', height: '80rpx' }"
                ></u-tabs>
            </view>
        </view>
        <!-- 优惠 -->
        <view class="recommend mt-32" v-show="type === 0">
            <view class="f jc-s-b mt-20">
                <view class="mr-16">
                    <view v-for="(item, index) in 5" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16">
                        <image src="../../static/logo.png" class="w-319 b-24" mode="widthFix"></image>
                        <view class="ph-12">
                            <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">养猫家庭的十条庭的十条庭的十条庭的十条庭的十条准则</view>
                            <view class="mt-8 fs-30 fw-600 text-color7">¥80.00 </view>
                        </view>
                    </view>
                </view>
                <view>
                    <view v-for="(item, index) in 5" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16">
                        <image
                            :src="getBaseUrl() + '/admin-api/system/file/19/get/c6009d928c873ea0e7fe9428552706637ba5ad83e3b3884b8c9169dfc45de3a5.png'"
                            class="w-319 b-24"
                            mode="widthFix"
                        ></image>
                        <view class="ph-12">
                            <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">养猫家庭的十条准则</view>
                            <view class="mt-8 fs-30 fw-600 text-color7">¥80.00</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 服务 -->
        <view class="mt-12" v-show="type === 1">
            <u-scroll-list :indicator="false" class="h-72 f ai-c">
                <view
                    v-for="(item, index) in statusList"
                    :key="index"
                    class="h-48 ph-16 b-48 mr-24 status fs-24 text-color4 f ai-c"
                    @click="changeStatus(index)"
                    :class="status == index ? 'active' : ''"
                >
                    {{ item.name }}
                </view>
            </u-scroll-list>
            <view class="f ai-c jc-s-b list pv-32" v-for="(item, index) in 4" :key="index">
                <image src="../../static/logo.png" class="w-160 h-160 b-24 mr-20"></image>
                <view class="f f1 fd-c">
                    <view class="fs-28 fw-600 text-color4">养猫家庭的十条准则</view>
                    <view class="f mt-12 ai-c">
                        <view class="w-32 h-28 fs-20 text-color5 f ai-c jc-c mr-8 favour">惠</view>
                        <view class="fs-26 fw-600 text-color7 mr-8">¥80</view>
                        <view class="w-44 h-28 b-4 fs-20 text-color8 discount">5折</view>
                        <view class="fs-26 text-color3 old-price">¥80.55</view>
                    </view>
                    <view class="mt-20 f ai-c jc-s-b">
                        <view class="fs-22 text-color3">年售100+</view>
                        <view class="w-144 h-56 b-56 f ai-c jc-c fs-26 text-color reservation">立即预约</view>
                    </view>
                </view>
            </view>
            <view class="w-f h-72 b-36 fs-26 fw-600 text-color mt-32 btn f ai-c jc-c">查看更多服务</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getBaseUrl } from '@/utils/env';
const typeList = [
    {
        name: '优惠',
    },
    {
        name: '服务',
    },
];
const statusList = ref([
    {
        name: '全部',
    },
    {
        name: '洗澡',
    },
]);
const type = ref(0);
const status = ref(0);
const changeType = (data: any) => {
    type.value = data.index;
};

const changeStatus = (data: number) => {
    status.value = data;
};
</script>
<style lang="scss" scoped>
.goods {
    background: #ffffff;
    .btn {
        background: #faf5e6;
    }
    .list {
        border-bottom: 1px solid #f0f0f0;
    }
    .list:last-child {
        border-bottom: none;
    }
    .reservation {
        border: 1rpx solid #fabb3c;
    }
    .discount {
        background: #fff5f5;
    }
    .favour {
        background: #f54040;
    }
    .old-price {
        text-decoration: line-through;
    }
    .active {
        background: #faf5e6;
        border-radius: 4rpx;
        color: #fabb3c;
    }
    .status {
        background: #f5f5f5;
    }
    .box {
        background: #f5f5f5;
    }
}
</style>
